<template>
  <!-- <div style="width:90%;">
    <div class="chart-detail-tab">
      <a
        href=" "
        class="on"
      >选项1</a>
      <a href="javascript:;">选项2</a>
    </div> -->
  <div id="gaonenghaohangye"></div>
  <!-- </div> -->
</template>

<script>

import echarts from "echarts";
import shenzhenJson from "../../../public/json/shenzhen.json";
require("echarts/theme/macarons"); // echarts theme
import echarsData from "../../../public/json/echarsData.json";
export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    tabIndexVal: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      chart: null,
      myChart: null,
    };
  },
  watch: {
    tabIndexVal(val, oldVal) {
      // console.log(val, oldVal, this);
      if (val == 1) {
        this.createLine();
      } else if (val == 2) {
        this.createLine2();
      } else if (val == 3) {
        this.createLine3();
      } else if (val == 4) {
        this.createMap();
      }
    },
  },
  mounted() {
    this.createLine();
  },
  methods: {
    //1
    createLine() {
      echarts.init(document.getElementById("gaonenghaohangye")).dispose();
      var chartDom = document.getElementById("gaonenghaohangye");
      this.myChart = echarts.init(chartDom);
      var option;
      let gaohaonenghangyebaobiao = echarsData.gaohaonenghangyebaobiao;

      var legend = [];
      var years = [];

      for (const key in gaohaonenghangyebaobiao.hangye) {
        legend.push(gaohaonenghangyebaobiao.hangye[key]);
      }

      for (const key in gaohaonenghangyebaobiao.series) {
        years.push(key);
      }

      option = {
        title: {
          text: "高能耗行业",
          subtext: "总能耗趋势",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            color: "#fff",
            fontSize: 16,
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          left: "center",
          align: "right",
        },
        grid: {
          left: "0%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: years,
          boundaryGap: false,
          data: ["2016年", "2017年", "2018年", "2019年", "2020年"],
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#fff"],
              opacity: 0.1,
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        color: [
          "#5ad8a6",
          "#f6bd16",
          //"#e8684a",
          "#5470c6",
          "#87ba76",
          "#fac858",
          //"#ea7c71",
          "#f1ab60",
          "#1ab8c2",
          "#418dd3",
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290],
            type: "line",
            smooth: true,
          },
        ],
      };

      option && this.myChart.setOption(option);
    },
    createLine2() {
      echarts.init(document.getElementById("gaonenghaohangye")).dispose();
      let gaohaonenghangyebaobiao = echarsData.gaohaonenghangyebaobiao;
      var chartDom = document.getElementById("gaonenghaohangye");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "电力行业",
          subtext: "能耗占比趋势",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            color: "#fff",
            fontSize: 16,
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          left: "center",
          align: "right",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var total = 0;

            for (var i = 0; i < params.length; i++) {
              total += params[i].data;
            }

            var res_array = [];
            res_array[0] = "";
            for (var j = 0; j < params.length; j++) {
              var temp = params[j];
              res_array[0] = temp.axisValue;
              res_array.push(
                temp.seriesName +
                  ":" +
                  ((parseInt(temp.data) * 100) / total).toFixed(2) +
                  "%"
              );
            }
            return res_array.join("<br/>");
          },
        },
        legend: {
          show: true,
          data: [
            "石油、煤炭及其他燃料加工业",
            "化学原料和化学制品制造业",
            "非金属矿物制品业",
            "黑色金属冶炼和压延加工业",
            "有色金属冶炼和压延加工业",
            "电力、热力生产和供应业（仅含4411、4412）",
          ],
          textStyle: {
            fontSize: 10, //字体大小
            color: "#fff", //字体颜色
          },
          orient: "vertical",
          left: "center",
          bottom: "bottom",
        },
        grid: {
          left: "0%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2016年", "2017年", "2018年", "2019年", "2020年"],
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#fff"],
              opacity: 0.1,
            },
          },
        },
        series: [
          {
            name: "石油、煤炭及其他燃料加工业",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90],
          },
          {
            name: "化学原料和化学制品制造业",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290],
          },
          {
            name: "非金属矿物制品业",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190],
          },
          {
            name: "黑色金属冶炼和压延加工业",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "有色金属冶炼和压延加工业",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 290],
          },

          {
            name: "电力、热力生产和供应业（仅含4411、4412）",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    createLine3() {
      echarts.init(document.getElementById("gaonenghaohangye")).dispose();
      let gaohaonenghangyebaobiao = echarsData.gaohaonenghangyebaobiao;
      var chartDom = document.getElementById("gaonenghaohangye");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "电力行业",
          subtext: "能耗占比趋势",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            color: "#fff",
            fontSize: 16,
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          left: "center",
          align: "right",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var res_array = [];
            res_array[0] = "";
            for (var j = 0; j < params.length; j++) {
              var temp = params[j];
              res_array[0] = temp.axisValue;
              res_array.push(temp.seriesName + ":" + temp.data + "家");
            }
            return res_array.join("<br/>");
          },
        },
        legend: {
          show: true,
          data: [
            "福田区",
            "南山区",
            "龙岗区",
            "龙华区",
            "坪山区",
            "盐田区",
            "光明区",
            "大鹏新区",
            "罗湖区",
            "宝安区",
            "深汕合作区",
          ],
          textStyle: {
            fontSize: 10, //字体大小
            color: "#fff", //字体颜色
          },
          orient: "vertical",
          left: "center",
          bottom: "bottom",
        },
        color: [
          "#5ad8a6",
          "#f6bd16",
          //"#e8684a",
          "#5470c6",
          "#87ba76",
          "#fac858",
          //"#ea7c71",
          "#f1ab60",
          "#1ab8c2",
          "#418dd3",
        ],
        grid: {
          left: "0%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2016年", "2017年", "2018年", "2019年", "2020年"],
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1, //这里是为了突出显示加上的
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#fff"],
              opacity: 0.1,
            },
          },
        },
        series: [
          {
            name: "福田区",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90],
          },
          {
            name: "南山区",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290],
          },
          {
            name: "龙岗区",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190],
          },
          {
            name: "龙华区",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "坪山区",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 290],
          },

          {
            name: "盐田区",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90],
          },
          {
            name: "光明区",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290],
          },
          {
            name: "大鹏新区",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190],
          },
          {
            name: "罗湖区",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "宝安区",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 290],
          },
          {
            name: "深汕合作区",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 290],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    createMap() {
      let zhongdianyongneng = echarsData.zhongdianyongneng;
      var myChart = echarts.init(document.getElementById("gaonenghaohangye"));
      echarts.registerMap("深圳", shenzhenJson);

      var yearArr = ["数量"];
      var yearIndex = 0;
      var selectedRange = null;
      var option = null;
      var str = "";
      var data = [];
      var geoCoordMap = {};

      var mapFeatures = echarts.getMap("深圳").geoJson.features;
      mapFeatures.forEach(function (v, index) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;
        data.push({
          name: name,
          value: [
            {
              name: "数量",
              value: zhongdianyongneng.rawData[index][1],
            },
          ],
        });
      });

      //var geoCoordMap = eval("({"+str+"})");
      // console.log("===========geoCoordMap===============");
      // for (var i in geoCoordMap) {
      //   console.log(geoCoordMap[i]);
      // }
      // console.log(geoCoordMap);
      // console.log("===========data===============");
      // console.log(data);

      function convertMapDta(year, data) {
        var mapData = [];
        data.forEach(function (v) {
          v.value.forEach(function (v1) {
            if (String(v1.name) === String(year)) {
              mapData.push({
                name: v.name,
                value: v1.value,
              });
            }
          });
        });
        return mapData;
      }

      function resetPie(myChart, params, geoCoordMap, yearIndex) {
        var op = myChart.getOption();
        var ops = op.series;
        ops.forEach(function (v, i) {
          if (i > 0) {
            var geoCoord = geoCoordMap[v.name];
            var p = myChart.convertToPixel(
              {
                seriesIndex: 0,
              },
              geoCoord
            );
            v.center = p;
            if (params != 0 && params.zoom) {
              v.radius = v.radius * params.zoom;
            }
            if (params != 0 && params.selected) {
              var rangeFirstNumber = params.selected[0];
              var rangeSecondNumber = params.selected[1];
              var pd = v.data[yearIndex].value;
              if (pd < rangeFirstNumber || pd > rangeSecondNumber) {
                v.itemStyle.normal.opacity = 0;
              } else {
                v.itemStyle.normal.opacity = 1;
              }
            }
          }
        });
        myChart.setOption(op, true);
      }

      function addPie(chart, data) {
        var op = chart.getOption();
        var sd = option.series;
        for (var i = 0; i < data.length; i++) {
          var randomValue = Math.round(Math.random() * 30);
          //var radius = randomValue <= 10 ? 10 : randomValue;
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            var vr = [];
            data[i].value.map(function (v, j) {
              vr.push({
                name: v.name,
                value: v.value,
              });
            });
            var p = chart.convertToPixel(
              {
                seriesIndex: 0,
              },
              geoCoord
            );
            // console.log(vr);
            sd.push({
              name: data[i].name,
              type: "pie",
              radius: ["5%", "8%"],
              hoverAnimation: false,
              label: {
                //  饼图图形上的文本标签
                normal: {
                  // normal 是图形在默认状态下的样式
                  show: true,
                  position: "center",
                  color: "#000",
                  fontSize: 16,
                  fontWeight: "bold",
                  formatter: "{c}", // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
                },
              },
              tooltip: {
                formatter: function (params) {
                  return (
                    params.seriesName +
                    "<br/>" +
                    params.name +
                    " : " +
                    params.value
                  );
                },
              },
              //radius: radius,
              center: p,
              data: [
                {
                  name: "企业数量",
                  value: parseInt(vr[0].value),
                  itemStyle: {
                    normal: {
                      color: "#2866FF",
                      label: {
                        normal: {
                          show: true,
                        },
                      },
                    },
                  },
                },
                {
                  name: "占比",
                  value: 100 - parseInt(vr[0].value),
                  itemStyle: {},
                  label: {
                    normal: {
                      show: false,
                    },
                  },
                },
              ],
              zlevel: 4,

              labelLine: {
                normal: {
                  show: false,
                },
              },
              itemStyle: {
                mormal: {
                  opacity: 1,
                },
              },
            });
          }
        }
        return sd;
      }

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "高能耗行业-各区占比趋势",
          subtext: "深圳节能在线",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            color: "#fff",
          },
          subtextStyle: {
            //副标题文本样式{"color": "#aaa"}
            color: "#cdcdcd",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (params.value) {
              return (
                params.name + "<br/>" + yearArr[yearIndex] + ": " + params.value
              );
            }
          },
        },
        visualMap: {
          min: 0,
          max: 120,
          right: "2%",
          top: "bottom",
          seriesIndex: 0,
          text: ["高", "低"],
          calculable: true,
          color: ["#c05050", "#e5cf0d", "#5ab1ef"],
        },
        series: [
          {
            name: "chinaMap",
            type: "map",
            mapType: "深圳",
            // roam: true,
            label: {
              position: "top",
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#eee",
              },
            },
            data: convertMapDta(yearArr[yearIndex], data),
            /*zlevel:3*/
          },
        ],
      };

      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }

      addPie(myChart, data);
      // console.log("===========option=================");
      // console.log(option);
      myChart.setOption(option, true);
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
};
</script>
<style>
#gaonenghaohangye {
  height: 80%;
}
</style>
